<template name="dashboard">
    <div class="row">
        <div class="col-md-6">
            {{test}}
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title">Users</h3>
              </div>
              <ul class="list-group">
                  {{#each getUsers}}
                <li class="list-group-item user-button {{#if this.status}}online{{else}}offline{{/if}}" role="button">
                    
                    {{this.email}}
                    </li>
                    {{/each}}
              </ul>
            </div>
        </div>
        <div class="col-md-6">
            
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title">Web Cams</h3>
              </div>
              <div class="panel-body">
                  <div class="row">
                      <p>{{getStatusText}}</p>
                  </div>
                  <div class="row">
                      {{#if getState "ringing"}}
                          <button class="btn btn-success answer-call">
                              Answer
                          </button>
                          <button class="btn btn-danger reject-call">
                              Reject
                          </button>
                      {{/if}}
                      {{#if getState "inProgress"}}
                          <button class="btn btn-danger end-call">
                              End Call
                          </button>
                      {{/if}}
                  </div>
                  <div class="row">
                <video id="localVideo"></video>
                <div class="row"> Local
                {{#if getState "inProgress"}}
                    {{#if getState "localMuted"}}
                       <button class="btn btn-danger mute-local">
                              UnMute
                        </button>
                    {{else}}
                        <button class="btn btn-danger mute-local">
                              Mute
                        </button>
                    {{/if}}
                {{/if}}
                          </div>
                </div>
                <div class="row">
                    <video id="remoteVideo"></video>
                    <div class="row">
                        Remote
                        {{#if getState "inProgress"}}
                            {{#if getState "remoteMuted"}}
                               <button class="btn btn-danger mute-remote">
                                      UnMute
                                </button>
                            {{else}}
                                <button class="btn btn-danger mute-remote">
                                      Mute
                                </button>
                            {{/if}}
                        {{/if}}
                        </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>
